<template>
  <div class="exam-container">
    <el-skeleton :loading="data.isFirst" :rows="14" animated>
    <div class="content">
      <div class="top">
        <el-button type="primary" @click="() => router.push('/organization/add')"
          >新增组织</el-button
        >

        <div style="margin-right: 10px">
          <el-tag>右击组织右侧图标可以对组织进行新增/详情/删除哦</el-tag>
        </div>
      </div>

      <div class="mian-content">
        <el-row :gutter="20">
          <el-col :span="4">
            <div class="left exam-container">
              <el-dropdown>
                <el-tree
                  :data="orgData.data"
                  :props="defaultProps"
                  default-expand-all
                  highlight-current
                  @node-click="handleNodeClick"
                  :expand-on-click-node="false"
                >
                  <!-- @node-contextmenu="youClick" 右击事件 -->
                  <template #default="{ node, data }">
                    <span> <i :class="data.icon"></i>{{ data.label }} </span>

                    <el-tooltip effect="dark" :content="node.label" placement="top">
                      <span>{{ node.label }}</span>
                    </el-tooltip>

                    <el-dropdown
                      class="tree-dropdown"
                      :style="[activeNode === node.data.$treeNodeId && 'visibility:visible']"
                      :hide-on-click="false"
                      placement="bottom"
                      trigger="contextmenu"
                    >
                      <span class="inline-block rotate-90">
                        <div style="margin-left: 3px">
                          <el-icon :size="16" class="iconfont icon-bianji"></el-icon>
                        </div>
                      </span>
                      <template #dropdown>
                        <el-dropdown-menu>
                          <el-dropdown-item @click="()=>{router.push(`/organization/add/${data.id}`)}">
                            <i class="iconfont icon-add">新增</i>
                          </el-dropdown-item>
                          <el-dropdown-item @click="()=>{ElMessage.error(`开发中...`)}">
                            <i class="iconfont icon-liebiao">详情</i>
                          </el-dropdown-item>
                          <el-dropdown-item
                            @click="deleteOrg(data)"
                            :disabled="data.children.length != 0"
                          >
                            <i class="iconfont icon-shanchu">删除</i>
                          </el-dropdown-item>
                        </el-dropdown-menu>
                      </template>
                    </el-dropdown>
                  </template>
                </el-tree>
              </el-dropdown>
            </div>
          </el-col>

          <el-col :span="20">
            <div style="margin-top: 10px">
              <el-table :data="tableData.data" v-loading="data.isLoad" :border="true">
                <el-table-column label="序号" type="index" width="60px"></el-table-column>
                <el-table-column
                  label="用户"
                  prop="name"
                  :show-overflow-tooltip="true"
                  class="last_commoner"
                >
                </el-table-column>

                <el-table-column
                  label="账号"
                  prop="account"
                  :show-overflow-tooltip="true"
                  class="last_commoner"
                >
                </el-table-column>

                <el-table-column
                  label="组织·职务"
                  prop="name"
                  :show-overflow-tooltip="true"
                  class="last_commoner"
                >
                  <template #default="scope">
                    <el-tag type="primary" size="small"
                      >{{ scope.row.org[0].oname }}·{{ scope.row.org[0].zname }}</el-tag
                    >
                  </template>
                </el-table-column>

                <el-table-column
                  label="负责人"
                  prop="account"
                  :show-overflow-tooltip="true"
                  class="last_commoner"
                >
                  <template #default="scope">
                    <el-tag type="success" v-if="scope.row.org[0].isDirector === 1">是</el-tag>
                    <el-tag type="danger" v-else>否</el-tag>
                  </template>
                </el-table-column>

                <!-- <el-table-column label="操作" fixed="right" width="200"> </el-table-column> -->
              </el-table>

              <!-- 分页 -->
              <div style="margin-top: 10px; padding-bottom: 10px">
                <el-pagination
                  background
                  layout="prev, pager, next"
                  :total="data.pages.total"
                  small
                  :page-size="data.pages.limit"
                  v-model:current-page="data.pages.page"
                />
              </div>
            </div>
          </el-col>
        </el-row>
      </div>
    </div>
  </el-skeleton>
  </div>
</template>



<script setup lang="ts">
import { ElMessage, ElMessageBox } from 'element-plus'
import { onMounted, reactive, ref, toRefs, watchEffect } from 'vue'
import { useRoute, useRouter } from 'vue-router'
import { getOrganizations, getCurrOrgUsers, deleteOrgs } from '../../api/org'
import { closeLoad, openLoad } from '@/utils/loading';
const router = useRouter();
const routes = useRoute();
//复选框设置
const defaultProps = {
  children: 'children',
  label: 'name'
}
//页面数据  表格数据默认行知数据
const data = reactive({
  isLoad: false,
  orgData: {
    data: []
  },
  tableData: {
    data: []
  },
  pages: {
    limit: 10,
    page: 1,
    total: 0
  },
  isFirst:true
})
//查询的组织id
const tableID = ref<string>('C1FC523B04A5415D9A7FEAEEEE5A79AD')

//删除组织
const deleteOrg = (r: any) => {
  console.log(r.id)
  ElMessageBox.confirm(`你确定要删除组织【${r.name}】吗?`)
    .then(() => {
      openLoad("请稍后");
      deleteOrgs({ ids: [r.id] }).then((res: any) => {
        closeLoad();
        if (res.result === 0) {
          data.isFirst=true;
          ElMessage.success('操作成功');
          tableID.value='C1FC523B04A5415D9A7FEAEEEE5A79AD';
          getOrganization();
        } else {
          ElMessage.error(res.message)
        }
      })
    })
    .catch((res: any) => {
      ElMessage.error(res.message)
    })
}

//获取所有组织
const getOrganization = () => {
  getOrganizations({ page: 1, limit: 9999 }).then((res: any) => {
    data.orgData.data = res.data.data;
    data.isFirst=false;
  })
}

//根据组织id 查询组织下所有用户
const getCurrOrgUser = () => {
  data.isLoad = true
  getCurrOrgUsers({ page: data.pages.page, limit: data.pages.limit, id: tableID.value }).then(
    (res: any) => {
      data.tableData.data = res.data.data;
      data.pages.total = res.data.total;
      data.isLoad = false;
    }
  )
}

//点击组织结点，获取点击的组织的用户
const handleNodeClick = (data: any) => {
  tableID.value = data.id
    
  getCurrOrgUser()
}
const { orgData, tableData } = toRefs(data)

onMounted(() => {
  getOrganization();
})

watchEffect(() => {
  getCurrOrgUser()
})
</script>


<style scoped>
.content {
  padding: 5px;
}

.top {
  border: 1px solid #eee;
  height: 50px;
  padding-left: 8px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  border-radius: 5px;
}

.left {
  margin: 0;
  margin-top: 10px;
}
</style>